<template>
  <view class="gb_parent" :style="parentCss">
    <view class="gb_process" :style="processCss"></view>
    <view class="gb_left_part" :style="leftCss"></view>
    <view class="gb_right_part" :style="rightCss"></view>
    <view class="gb_inner_circle" :style="innerCircleCss">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    props: {
      // 圈底色
      processColor: {
        type: String,
        default: '#42b983'
      },
      // 进度色
      originalColor: {
        type: String,
        default: '#EEEEEE'
      },
      // 圈内色
      innerbgColor: {
        type: String,
        default: '#FFFFFF'
      },
      // 进度
      process: {
        type: Number,
        default: 0
      },
      // 半径 单位rpx
      radius: {
        type: Number,
        default: 100
      },
      // 进度条宽 单位rpx
      barWidth: {
        type: Number,
        default: 3
      },
      // 起始弧度从顶开始顺时钟
      startPosDegree: {
        type: Number,
        default: 0
      }
    },
    computed: {
      processCss() {
        const {
          radius,
          processColor
        } = this;
        return {
          borderRadius: `${radius}rpx`,
          height: `${radius * 2}rpx`,
          width: `${radius * 2}rpx`,
          borderWidth:'10rpx',
          borderStyle:'solid',
          borderColor: processColor,
          // backgroundColor: processColor,
        }
      },
      parentCss() {
        const {
          radius,
          startPosDegree
        } = this;
        return {
          borderRadius: `${radius}rpx`,
          height: `${radius * 2}rpx`,
          width: `${radius * 2}rpx`,
          transform: 'rotate(' + startPosDegree + 'deg )',
        }
      },
      leftCss() {
        let {
          radius,
          originalColor,
          process
        } = this;
        let leftTransformerDegree = (process > 50 ? ((process > 100 ? 100 : process) - 50) * 3.6 : 0) + 'deg';
        return {
          height: `${radius * 2}rpx`,
          width: `${radius}rpx`,
          backgroundColor: '#000',
          transform: 'rotate(' + leftTransformerDegree + ')',
          transformOrigin: 'right center',
          borderTopLeftRadius: `${radius}rpx`,
          borderBottomLeftRadius: `${radius}rpx`,
          left: 0,
          top: 0
        }
      },
      rightCss() {
        let {
          radius,
          processColor,
          originalColor,
          process
        } = this;
        let rightTransformerDegree = ((process > 50 ? 0 : process) * 3.6) + 'deg';

        return {
          height: `${radius * 2}rpx`,
          width: `${radius}rpx`,

          borderWidth:'10rpx',
          borderStyle:'solid',
          // borderColor: processColor,
          borderColor: process > 50 ? processColor : '#fff000',
          transform: 'rotate(' + rightTransformerDegree + ')',
          transformOrigin: 'left center',
          borderTopRightRadius: `${radius}rpx`,
          borderBottomRightRadius: `${radius}rpx`,
          left: `${radius}rpx`,
          top: 0
        }
      },
      innerCircleCss() {
        const {
          radius,
          innerbgColor,
          barWidth,
          startPosDegree
        } = this;
        return {
          borderRadius: `${radius - barWidth}rpx`,
          height: `${(radius - barWidth) * 2}rpx`,
          width: `${(radius - barWidth) * 2}rpx`,
          transform: 'rotate(' + (0 - startPosDegree) + 'deg )',
          backgroundColor: innerbgColor,
          left: `${barWidth}rpx`,
          top: `${barWidth}rpx`,
        }
      },
    },
    mounted() {

    },
    methods: {}
  }
</script>

<style scoped>
  .gb_component {
    justify-content: center;
    align-items: center;
  }

  .gb_parent {
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .gb_process {
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .gb_inner_circle {
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    display: flex;
  }

  .gb_left_part {
    overflow: hidden;
    position: absolute;
  }

  .gb_right_part {
    overflow: hidden;
    position: absolute;
  }
</style>
